<template>
    <div class="Preson">
        <h2>watch监视【ref】定义的【基本类型】数据</h2>
    <h2>sum:{{ sum }}</h2>
    <button @click="changeSum">点击一下加一</button>
    </div>
</template>

<script lang="ts" setup>
import {  watch,ref } from 'vue'

let sum = ref(0)

function changeSum() {
    sum.value += 1
}

// watch监视ref定义的基本类型数据
// watch(监视源,(监视的参数1,监视的参数2) => {

// })
const stopWatch = watch(sum,(newValue,oldValue) => {
    console.log('sum变化了',newValue,oldValue);
    if (newValue>=10) {
        stopWatch()
    }
})

</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
   
    display: flex;
    flex-direction: column;
}

button { 
    margin: 0 10px;
    width: 180px;
}
input{
    width: 180px;
}
</style>